<template>
<div class="user-focus-fans">
    <van-nav-bar
        :title="title"
        style="position:sticky;"
        left-arrow
        @click-left="$router.go(-1)"
    />
    <van-tabs v-model="active" sticky @click="chtab">
        <van-tab title="关注">
            <div class="list">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    :error.sync="error"
                    error-text='请求失败，重新加载'
                    @load="getlist"
                >
                 
                    <van-cell  center v-for="(item,index) in focuslist" :key="index" >
                        <template #icon >
                            <van-image
                                round
                                width="40"
                                height="40"
                                :src="item.photo"
                                style="margin-right: 15px;"
                            />
                        </template>
                       
                        <template #default>
                            <focusBtn :detaile='item' type="focus_fans" />
                        </template>
                        <template #title>
                            {{item.name}}
                        </template>
                        <template #label>
                            粉丝数：{{item.fans_count}}
                        </template>
                    </van-cell>
                </van-list>
            </div>
        </van-tab>
        <van-tab title="粉丝">
            <!-- <focusfans  /> -->
            <div class="list">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    :error.sync="error"
                    error-text='请求失败，重新加载'
                    @load="getlist"
                >
                    <van-cell  center v-for="(item,dex) in fanslist" :key="dex" >
                        <template #icon >
                            <van-image
                                round
                                width="40"
                                height="40"
                                :src="item.photo"
                                style="margin-right: 15px;"
                            />
                        </template>
                       
                        <template #default>
                            <!-- {{item.mutual_follow?'已关注':'关注'}} -->
                            <focusBtn :detaile='item' type="focus_fans" />
                        </template>
                        <template #title>
                            {{item.name}}
                        </template>
                        <template #label>
                            粉丝数：{{item.fans_count}}
                        </template>
                    </van-cell>
                </van-list>
            </div>
        </van-tab>
    </van-tabs>
    
</div>
    
</template>

<script>
import {getuserfocus,getuserfans} from '@/api/user'
import focusBtn from '@/components/focusbtn'
export default {
    components: {focusBtn},
    props:{
        id:{
            type:String,
            required:true,
            default:'0',
        }
    },
    data() {
        return {
            active:null,
            title:'关注/粉丝',
            focuslist:[],
            fanslist: [],
            loading: false,
            finished: false,
            timestamp:null,
            error:false,
            page:1,
            per_page:10,
        }
    },
    methods:{
        chtab(){
            this.$router.replace(`/userfocusfans/${this.active}`)
            this.fanslist=this.focuslist=[]
            this.getlist()
        },
        async getlist(){
            try{
                let data;
                if(this.active==0){
                    data=await getuserfocus({page:this.page,per_page:this.per_page})
                }else{
                    data=await getuserfans({page:this.page,per_page:this.per_page})
                }
                console.log(this.active)
                const results=data.data.data.results
                if(data.data.message=='OK'){
                    if(this.active==0){
                        this.focuslist=[...this.focuslist,...results] 
                    }else{
                        this.fanslist=[...this.fanslist,...results] 
                    }
                }
                this.loading=false;
                if(!results.length||results.length<this.per_page){
                    return this.finished=true
                }else{
                    this.page+=1
                }
            }catch(e){
                console.log(e)
                this.loading=false,
                this.finished=false,
                this.error=true
            }
        }
    },
    mounted(){
        this.$bus.$on('clickfocus',(data)=>{
            this.$router.go(0)
        })
        this.active=parseInt(this.id)
    },
    watch:{
        watch(val){
            console.log(this.active)
        }
    }
}
</script>

<style>

</style>